/**
 * 用 <Image /> 实现的头像显示组件。
 * 和 <Avatar /> 的区别是支持点击头像查看大图
 */
import { EyeOutlined } from '@ant-design/icons'
import { Image } from 'antd'
import { type ImageProps } from 'rc-image'
import  defaultAvatar  from '@/desktop/assets/avatar.jpg'

export function getDefaultMask(size: number) {
  return size >= 64 ? '查看头像' : <EyeOutlined css={{ fontSize: '14px' }} />
}

export function AvatarImage({
  size,
  radius = size,
  preview = { mask: getDefaultMask(size) },
  ...restProps
}: ImageProps & { size: number; radius?: number }) {
  // 外层的 onClick 用于避免查看大图时触发父元素的 onClick 事件
  return <div
    className="qun-avatar-image"
    css={[getStyle(radius), { width: `${size}px` }]}
    onClick={e => preview !== false && e.stopPropagation()}
  >
    <Image width={size} height={size} fallback={defaultAvatar} preview={preview} {...restProps} />
  </div>
}

function getStyle(radius: number) {
  return css`
    .ant-image-img,
    .ant-image-mask {
      border-radius: ${radius}px;
    }
    .ant-image-mask {
      font-size: 12px;
    }
  `
}
